<template>
    <div class="box2"></div>
</template>
<script setup>
import { animate, utils, engine } from 'animejs'
import { onMounted, ref } from 'vue'

onMounted(() => {
    createAnime()
})

const createAnime = () => {
    const [$container] = utils.$('.box2')
    for (let i = 0; i < 150; i++) {
        const $particle = document.createElement('div')
        $particle.classList.add('particle')
        $container.appendChild($particle)
        animate($particle, {
            x: utils.random(-1000, 1000) + 'px',
            y: utils.random(-200, 200) + 'px',
            scale: [{ from: 0, to: 1 }, { to: 0 }],
            delay: utils.random(0, 2000),
            loop: true,
            duration: 2000,
        })
    }
}
</script>
<style lang="less" scoped>
.box2 {
    height: 400px;
    position: relative;
}
</style>
<style lang="less">
.particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 20px;
    transform: translate(-50%, -50%);
    will-change: transform;
    mix-blend-mode: plus-lighter;
    background: var(--primary-color);
    box-shadow:
        0 0 1px 0 var(--primary-color),
        0 0 20px 0 var(--primary-color);
}
</style>
